<template>
	<view class="info-cell-class" @click="comClick">
		<view class="info-cell-content">
			<view class="info-label" :style="lableStyle">{{ label }}</view>
			<view v-if="type == 'text'" class="info-value" :style="valueStyle">
				<text v-if="value">{{ valCompute }}</text>
				<text class="no-value" v-else>{{otherText}}</text>
			</view>
			<!-- 箭头 -->
			<view v-if="isLink" class="cell-arrow" :style="valueStyle">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view v-if="type === 'image'" class="info-image">
			<u-image v-for="(img, index) in imgSrc" :key="index" width="25vw" height="25vw" radius="2vw" :src="img"
				class="image-class" @click="imagePreview(index)"></u-image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: "text",
			},
			label: {
				type: String,
				default: "标签的名称",
			},
			value: {
				type: String | Number | Object,
				default: "",
			},
			image: {
				type: Array,
				default: () => [],
			},
			isLink: {
				type: Boolean,
				default: false,
			},
			valueColor: {
				type: String,
				default: "",
			},
			lableColor: {
				type: String,
				default: "",
			},
			otherText: {
				type: [String,Number],
				default: '暂无',
			}
		},
		computed: {
			imgSrc() {
				return this.image.filter(f => Boolean(f))
			},
			valueStyle() {
				return {
					color: this.valueColor
				}
			},
			valCompute() {
				return this.value
			},
			lableStyle() {
				return {
					color: this.lableColor
				}
			},
		},
		methods: {
			imagePreview(index) {
				uni.previewImage({
					urls: this.imgSrc,
					current: index
				});
			},
			comClick() {
				this.$emit('click')
			}
		},
	};
</script>

<style lang="scss" scoped>
	.info-cell-class {
		padding: 4vw 4vw;
		color: rgb(179, 181, 185);
		font-size: 4vw;
		font-weight: 300;
		position: relative;

		&:after {
			content: "";
			position: absolute;
			left: 3vw;
			right: 3vw;
			bottom: 0;
			height: 1px;
			transform: scaleY(0.5);
			background-color: #e5e5e5;
		}

		.info-cell-content {
			display: flex;
			flex-wrap: wrap;
			position: relative;

			.info-label {
				width: 33vw;
				flex-shrink: 0;
			}

			.info-value {
				flex: 1;
				// color: #333;

				.no-value {
					color: rgb(179, 181, 185);
				}
			}

			.cell-arrow {
				transform: scaleX(0.8);
			}
		}

		.info-image {
			margin-top: 2vw;

			.image-class {
				margin-right: 1.8vw;
				margin-bottom: 0.5vw;

				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}
</style>
